// components/process-bar/process-bar.js
let movableAreaWidth = 0
let movableViewWidth = 0
let backgroundAudioManager = wx.getBackgroundAudioManager()
let currentSec = -1 //当前秒
let duration = 0 //总时长
let isMoving = false //当前进度条是否在拖拽
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    isSame: Boolean
  },

  /**
   * 组件的初始数据
   */
  data: {
    showTime: {
      currentTime: '00:00',
      totalTime: '00:00'
    },
    movableDis: 0,
    progress: 0,
  },
  lifetimes: {
    ready() {
      if (this.properties.isSame=true && this.data.showTime.totalTime == '00:00') {
        this.setTime()
      }
      this.getMovableDis()
      this.bindBGEvent()
    }
  },
  /**
   * 组件的方法列表
   */
  methods: {
    onChange(event) {
      if (event.detail.source == 'touch') {
        this.data.progress = event.detail.x / (movableAreaWidth - movableViewWidth) * 100
        this.data.movableDis = event.detail.x
        isMoving = true
      }
    },
    onTochangeEnd() {
      const currentTimeFMT = this.dataFormat(Math.floor(backgroundAudioManager.currentTime))
      this.setData({
        progress: this.data.progress,
        movableDis: this.data.movableDis,
        ['showTime.currentTime']: `${currentTimeFMT.min}:${currentTimeFMT.sec}`
      })
      backgroundAudioManager.seek(duration * this.data.progress / 100)
      isMoving = false
    },
    getMovableDis() {
      const query = this.createSelectorQuery()
      query.select('.movable-area').boundingClientRect()
      query.select('.movable-view').boundingClientRect()
      query.exec((rect) => {
        /*   console.log(rect) */
        movableAreaWidth = rect[0].width
        movableViewWidth = rect[1].width
      })
    },
    bindBGEvent() {
      backgroundAudioManager.onPlay(() => {
        isMoving = false
        this.triggerEvent('musicPlay')
      })
      backgroundAudioManager.onStop(() => {})
      backgroundAudioManager.onPause(() => {
        this.triggerEvent('musicPause')
      })
      backgroundAudioManager.onWaiting(() => {})
      backgroundAudioManager.onCanplay(() => {
        if (backgroundAudioManager.duration === undefined) {
          this.setTime()
        }
        setTimeout(() => {
          this.setTime()
        }, 1000)
      })
      backgroundAudioManager.onTimeUpdate(() => {
        if (!isMoving) {
          const currentTime = backgroundAudioManager.currentTime
          const duration = backgroundAudioManager.duration
          const sec = currentTime.toString().split('.')[0]
          if (sec != currentSec) {
            const currentTimeFmt = this.dataFormat(currentTime)
            this.setData({
              movableDis: (movableAreaWidth - movableViewWidth) * currentTime / duration,
              progress: currentTime / duration * 100,
              ['showTime.currentTime']: `${currentTimeFmt.min}:${currentTimeFmt.sec}`
            })
            currentSec = sec
            this.triggerEvent('timeUpdate', {
              currentTime
            })
            /*         console.log(currentTime) */
          }
        }


      })
      backgroundAudioManager.onEnded(() => {
        this.triggerEvent('musicEnd')
      })
      backgroundAudioManager.onError(() => {
        console.error(res.errMsg)
        console.error(res.errCode)
        wx.showToast({
          title: '错误' + res.errCode,
        })
      })


    },
    setTime() {
      duration = backgroundAudioManager.duration
      /*     console.log(duration) */
      const durationFmt = this.dataFormat(duration)
      /*       console.log(durationFmt) */
      this.setData({
        ['showTime.totalTime']: `${durationFmt.min}:${durationFmt.sec}`
      })
    },
    /* 格式化事件 */
    dataFormat(sec) {
      const min = Math.floor(sec / 60)
      sec = Math.floor(sec % 60)
      return {
        'min': this.parse0(min),
        'sec': this.parse0(sec)
      }

    },
    parse0(sec) {
      return sec < 10 ? '0' + sec : sec
    }

  }
})